<template>
    <div>
      <page-dialog
        :title="dialogInfo.title"
        v-model:visible="shows"
        :width="dialogInfo.width"
        :bt-list="dialogInfo.btList"
      >
        <!--左右布局-->
        <!-- 条件栏 -->
        <div class="layui-row">
          <div class="layui-col-md6 SelectSupplierAddPrice">
            <page-filter
              v-model:query="filterInfo.query"
              :filter-list="filterInfo.list"
            />
            <page-table
              :refresh="tableInfo.refresh"
              :init-curpage="tableInfo.initCurpage"
              v-model:data="tableInfo.data"
              :api="tableInfo.api"
              :listen-height="false"
              :reserveSelection="true"
              v-model:query="filterInfo.query"
              :field-list="tableInfo.fieldList"
              :handle="tableInfo.handle"
              :highlight-row="highlightRow"
              :check-box="checkBox"
              @handleEvent="handleEvent"
            >
            </page-table>
          </div>
          <div
            class="layui-col-md6 SelectSupplierAddPrice SelectSupplierAddPriceRight"
            style="padding-left: 20px"
          >
            <p style="line-height: 42px" class="slip-edit">已选供应商</p>
            <el-form :model="tableRightInfo" ref="tableForm" style="width: 100%">
              <page-table
                v-model:data="tableRightInfo.data"
                :check-box="false"
                :listen-height="false"
                :tab-index="true"
                :field-list="tableRightInfo.fieldList"
                :pager="false"
              >
                <template v-slot:col-price="scope">
                  <el-form-item
                    v-if="scope.$index >= 0"
                    :prop="'data.' + scope.$index + '.price'"
                    :rules="scope.$index >= 0 ? [
                      {
                        validator: systemConfig.product_price_can_be_zero
                          ? $validate.positiveMoneyZero
                          : $validate.positiveMoney,
                        trigger: 'blur',
                      },
                    ] : []"
                  >
                    <el-input-number
                      controls-position="right"
                      style="width: 100%"
                      v-model="scope.row.price"
                      :min="0"
                      :max="99999999999999"
                      @change="changePrice($event, `data.${scope.$index}.price`)"
                      :precision="systemConfig.price_precision"
                      :step="1"
                    />
                  </el-form-item>
                </template>
              </page-table>
            </el-form>
          </div>
        </div>
      </page-dialog>
    </div>
  </template>
  
  <script setup name="SelectSupplierAddPriceReport">
  import { getSupplierPage } from "@/api/core.js"
  const { proxy } = getCurrentInstance()
  const emits = defineEmits()
  const props = defineProps({
    highlightRow: {
      type: Boolean,
      default: false,
    },
    checkBox: {
      type: Boolean,
      default: true,
    },
    api: {
      type: Function,
      default: getSupplierPage,
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
    query: {
      type: Object,
      default: function () {
        return {}
      },
    },
    showStock: {
      type: Boolean,
      default: false,
    },
  })
  const shows = computed({
    get() {
      return props.showDialog
    },
    set(newValue) {
      emits('update:showDialog', newValue) // 更新父组件shows
    },
  })
  const systemConfig = ref(proxy.$store.state.permission.systemConfig)
  // 过滤相关配置
  const filterInfo = ref({
    query: {
      ...props.query
    },
    list: [
      {
        type: 'input',
        label: '供应商名称/编码',
        value: 'keyword',
        event: search,
      },
      { type: 'button', label: '搜索', event: search },
    ],
  })
  // 表格相关
  const tableInfo = ref({
    refresh: 1,
    initCurpage: 1,
    api: undefined,
    data: [],
    fieldList: [
    { label: "供应商名称", value: "supplierName" },
          { label: "供应商编码", value: "supplierCode" },

    ],
  })
  const tableRightInfo = ref({
    data: [],
    fieldList: [
    { label: "供应商名称", value: "supplierName" },
            { label: "供应商编码", value: "supplierCode" },
            { label: "价格", value: "price", type: "slot", width: 120 },

    ],
  })
  // 弹窗相关
  const dialogInfo = ref({
    title: '选择供应商',
    width: '85%',
    btLoading: false,
    btList: [
      { label: '关闭', event: handleClose, show: true },
      {
        label: '保存',
        type: 'primary',
        disabled: true,
        event: save,
        show: true,
      },
    ],
  })
  const selectRow = ref('')
  
  // 获取列表
  function getList() {
    tableInfo.value.api = props.api
    tableInfo.value.refresh = Math.random()
  }
  function search() {
    tableInfo.value.api = props.api
    tableInfo.value.initCurpage = Math.random()
    tableInfo.value.refresh = Math.random()
  }
  function changePrice(e, str) {
    proxy.$refs.tableForm.clearValidate(str)
  }
  async function save() {
    // emits('input', data)
    if (tableRightInfo.value.data.length) {
      await proxy.$refs.tableForm.validate((valid) => {
        if (valid) {
          handleClose()
          emits('callback', tableRightInfo.value.data)
        }
      })
    } else {
      proxy.$message({
        type: 'warning',
        duration: 3500,
        showClose: true,
        message: '请选择供应商',
      })
    }
  }
  function handleEvent(event, data) {
    switch (event) {
      case 'tableCheck':
        tableRightInfo.value['data'] = []
        proxy.$nextTick(() => {
          tableRightInfo.value['data'] = data
        })
        dialogInfo.value.btList[1].disabled = !data.length
        break
    }
  }
  // 关闭弹窗前的回调
  function handleClose() {
    shows.value = false
    emits('reset')
  }
  
  onMounted(() => {
    proxy.$nextTick(() => {
      getList()
    })
  })
  </script>
  
  <style scoped></style>
  